<template>
  <!-- 短信登录 -->
  <div>
    <el-form-item label="手机号" prop="phone">

      <div id="phone">
        <el-input class="capt" maxlength="11" v-model="phoneNumber"></el-input>
      </div>
      <span class="Verification" @click="sendSms" v-text="msg" user-select=none;></span>
    </el-form-item>
    <el-form-item label="验证码">
      <el-input v-model="code"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">提交</el-button>
    </el-form-item>
  </div>
</template>
<script>
import * as api from "@/api/users"
export default {
  props: {
    storageUserInfo: {
      require: true,
    }
  },
  data() {
    return {
      msg: "点击发送验证码",
      flag: true,
      phoneNumber: "",
      code: ""
    }
  },
  methods: {
    async sendSms() {
      if (this.flag) {
        this.flag = false;//关掉
        //调用接口,获取手机验证码
        let res = await api.getSmsCode(this.phoneNumber)
        console.log(res)
        if(res.data.state){
           this.$message({
            type: 'success',
           message: '短信发送成功',
           })
        }else{
          this.$message.error(res.data.msg);
        }
        let delay = 5
        this.msg = `${delay}秒后重新发送`
        this.interval = setInterval(() => {
          delay--
          if (delay < 1) {
            this.msg = '点击发送验证码'
            clearInterval(this.interval)
            //将开关重新打开
            this.flag = true;
          } else {
            this.msg = `${delay}秒后重新发送`
          }

        }, 1000)
      }
    },
    async submit() {
      let res = await api.smsLogin(this.code);
      console.log(res)
      //调用父组件的方法,储存用户信息
      this.storageUserInfo(res.data)
      //跳转页面
      this.$router.push('/')
    }
  }

}
</script>
<style lang="less" scoped>
.Verification {
  height: 40px;
  width: 115px;
  background: #fff;
  display: inline-block;
  // border-radius:0 5px 5xp 0;
  vertical-align: middle;
  color: #000;
  margin: -1px 0 0 -6px;

}

.capt {
  width: 135px;
  height: 40px;
  border: 0;

}

#phone {
  display: inline-block;

}

#phone /deep/.el-input__inner {
  width: 130px;
  border: 0;
}

// .er-input-inner{
//   border-radius: 5px 0 0 5px !important;
//   vertical-align: middle;
//   bottom: none;
//   width: 110px !important;
// }
</style>
